<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="error.jsp" pageEncoding="utf-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.f1{position:absolute; left:520px;top:150px;}
.f2{position:absolute; left:330px;top:150px;}
.r1{position:absolute; left:520px;top:190px;}
.r2{position:absolute; left:330px;top:190px;}
.l1{position:absolute; left:520px;top:230px;}
.l2{position:absolute; left:330px;top:230px;}
.i1{position:absolute; left:520px;top:270px;}
.i2{position:absolute; left:330px;top:270px;}
</style>
<link rel="stylesheet" href="js/themes/base/jquery.ui.all.css">
	<script src="js/jquery-1.5.1.js"></script>
	<script src="js/external/jquery.bgiframe-2.1.2.js"></script>
	<script src="js/ui/jquery.ui.core.js"></script>
	<script src="js/ui/jquery.ui.widget.js"></script>
	<script src="js/ui/jquery.ui.mouse.js"></script>
	<script src="js/ui/jquery.ui.draggable.js"></script>
	<script src="js/ui/jquery.ui.position.js"></script>
	<script src="js/ui/jquery.ui.resizable.js"></script>
	<script src="js/ui/jquery.ui.dialog.js"></script>
	<script src="js/ui/jquery.effects.core.js"></script>
	<script src="js/ui/jquery.effects.blind.js"></script>
	<script src="js/ui/jquery.effects.explode.js"></script>

	<script>
	$.fx.speeds._default = 1000;
	$(function() {
		$( "#dialog" ).dialog({
			autoOpen: false,
			show: "blind",
			hide: "explode"
		});

		$( "#opener" ).click(function() {
			$( "#dialog" ).dialog( "open" );
			return false;
		});
	});
	</script>
<link href="css/font.css" rel="stylesheet" type="text/css" />
</head>

<body background="image/back3.jpg" link="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF">
<div id="main">
    <ul style="margin-left:200px; margin-right:200px;">
	   <li class="f1" id="f"><b>
	   <font color="#FFFFFF" size="+2"><a href="info/main.jsp">访客</a></font>
	   </b></li>
	   <li class="r1" id="r"  onclick="javascript:document.getElementById('f').className='f2',
	                                  this.className='r2',
									  document.getElementById('l').className='l2',
									  document.getElementById('i').className='i2',
									  document.getElementById('reg_form').style.visibility='visible';"><b>
	   <font color="#FFFFFF" size="+2">注册</font>
	   </b></li>
	   <li class="l1" id="l"><b>
	   <font color="#FFFFFF" size="+2"><a href="login.jsp">登录</a></font>
	   </b></li>
	   <div class="demo">
	   <li class="i1" id="i"><b>
	   <font color="#FFFFFF" size="+2" id="opener">信息</font>
	   </b></li>
	   <div id="dialog" style="background:#FFFFFF">
	       <p>power by qyp & qll</p>
       </div>
	   </div>
	</ul>
</div>

<div id="reg_form" style="visibility:hidden;">
	<div id="reg_img" style="position:absolute; left:700px; top:200px; margin-left:auto; margin-right:auto;">
	     <img src="image/login_main.png" width="550px" height="330px" />
	</div>
<div id="reg" style="position:absolute; left:850px; top:350px; margin-left:auto; margin-right:auto;">
<table>
<form name="vform" id="vform" action="reg/register.jsp" method="post">
  <tr>
    <td><font class="myFont">账  号：</font></td>
    <td><input type="text" name="user" id="user" />
	<font color="#FF0000" style="visibility:hidden" id="zmess">请正确输入账号</font>
	</td>
  </tr>
    <tr>
    <td><font class="myFont">密  码：</font></td>
    <td><input type="password" name="psw" id="psw" />
	<font color="#FF0000" style="visibility:hidden" id="p1mess">请正确输入密码</font>
	</td>
  </tr>
    <tr>
    <td><font class="myFont">再输入：</font></td>
    <td><input type="password" name="pass" id="pass" />
	<font color="#FF0000" style="visibility:hidden" id="p2mess">两次输入密码不一致</font>
	</td>
  </tr>
   </tr>
    <tr>
    <td align="right"></td>
    <td><input type="reset"><input type="button" onClick="check(document.vform);" value="提交"></td>
  </tr>  
</form>
</table>	     
</div>
</div>
</body>
</html>
<script language="javascript">
function check(f)
{
     var n = document.vform.user.value;
	 var p1 = document.vform.psw.value;
	 var p2 = document.vform.pass.value;
	 var zmess = document.getElementById("zmess");
	 var p1mess = document.getElementById("p1mess");
	 var p2mess = document.getElementById("p2mess");
	 if(p1.length<1||n.length<1||p1!=p2||n.length!=n.trim().length||p1.length!=p1.trim().length)
	 {
	 if(n.length!=n.trim().length||p1.length!=p1.trim().length)
	 {
	  alert("账户名或者密码中有空格");
	 }
	 if(n.length<1)
	 {
	      zmess.style.visibility="visible";
	 }
	 else
	 {
	      zmess.style.visibility="hidden";
	 }
	 if(p1.length<1)
	 {
	      p1mess.style.visibility="visible";
	 }
	 else
	 {
	      p1mess.style.visibility="hidden";
	 }
	 if(p1!=p2)
	 {
	      p2mess.style.visibility="visible";
	 }
	 else
	 {
	      p2mess.style.visibility="hidden";
	 }
	 }
	 else
	 {
		  f.submit();
	 }
}
</script>